<template>
  <div>
    <div id="SalesConsultant"></div>
  </div>
</template>

<script>
  export default {
    name: 'SalesConsultant',
    data(){
      return{
        option: {
          tooltip: {formatter: '{a}: {c}'},
          series:[{
            name: '销售顾问',
            type: 'gauge',
            min: 0,
            max: 2500,
            radius:'90%',
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                // color: [[0.09, '#00ffff'], [0.82, '#1e90ff'], [1, '#fa5d19']],
                color: [[0.09, '#00998f'], [0.82, '#0660b5'], [1, '#d57121']],
                width: 3,
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            axisLabel: {            // 坐标轴小标记
              fontWeight: 'bolder',
              color: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            },
            axisTick: {            // 坐标轴小标记
              length: 5,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            splitLine: {           // 分隔线
              length: 12,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                width: 3,
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            pointer: {           // 分隔线
              shadowColor: '#fff', //默认透明
              shadowBlur: 5
            },
            title: {
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 12,
                fontStyle: 'italic',
                color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 10
              }
            },
            detail: {formatter: '{value}'},
            data: [{value: 30}]
          }]
        }
      }
    },
    mounted(){
      this.drawLine()
    },
    methods: {
      drawLine(){
        let SalesConsultant = this.$echarts.init(document.getElementById('SalesConsultant'))
        SalesConsultant.setOption(this.option);
        let sizeFun = function () {
          SalesConsultant.resize()
        }
        window.addEventListener('resize', sizeFun )
      }
    }
  }
</script>

<style scoped>
 #SalesConsultant {
   width: 100%;
   /*height: 200px;*/
   height: 25vh;
 }
</style>